import './index.css'

import { Button, DatePicker, Input, Pagination, Select } from 'antd'
import React, { useEffect, useState } from 'react'
import type { TableColumnsType, TableProps } from 'antd'

import { DatabaseOutlined } from '@ant-design/icons'
import type { DatePickerProps } from 'antd'
import { Orderlist } from '@/types/order/order'
import Remove from '@/components/Remove'
import { SearchOutlined } from '@ant-design/icons'
import { Table } from 'antd'
import useCrud from '@/api/CRUD/useCrud'
import { useNavigate } from 'react-router-dom'

type TableRowSelection<T> = TableProps<T>['rowSelection']

const App: React.FC = () => {
  const [page, setpage] = useState<number>(1) //页码

  const [status, setstatus] = useState<number>() //状态
  const [SubmitTime, setSubmitTime] = useState<string>('') //时间
  const [sourceType, setsourceType] = useState<number>() //来源
  const [orderType, setorderType] = useState<number>() //订单类型
  const [number, setnumber] = useState<string>() //订单编号
  const [receiverName, setreceiverName] = useState<string>() //收货人/电话

  const [statuss, setstatuss] = useState<number>() //状态
  const [SubmitTimes, setSubmitTimes] = useState<string>('') //时间
  const [sourceTypes, setsourceTypes] = useState<number>() //来源
  const [orderTypes, setorderTypes] = useState<number>() //订单类型
  const [numbers, setnumbers] = useState<string>() //订单编号
  const [receiverNames, setreceiverNames] = useState<string>() //收货人/电话
  // const [formData, setFormData] = useState<>({})
  const [pagesize] = useState<number>(5)
  const { useItems, useUpdateItem } = useCrud()
  const { isLoading, data, isError } = useItems(
    '/order/getorder',
    page,
    pagesize,
    {
      status: status,
      startTime: SubmitTime,
      endTime: SubmitTime,
      sourceType: sourceType,
      orderType: orderType,
      number: number,
      receiverName: receiverName
    }
  ) //数据获取

  const Seach = () => {
    setstatus(statuss)
    setSubmitTime(SubmitTimes)
    setsourceType(sourceTypes)
    setorderType(orderTypes)
    setnumber(numbers)
    setreceiverName(receiverNames)
  }
  //时间
  const dateonChange: DatePickerProps['onChange'] = (data, dateString) => {
    setSubmitTimes(dateString)
  }
  //重置
  const Reset = () => {
    setstatuss(undefined)
    setSubmitTimes(undefined)
    setsourceTypes(undefined)
    setorderTypes(undefined)
    setnumbers(undefined)
    setreceiverNames(undefined)
  }
  //分页
  const orderget = async (event: number | undefined) => {
    setpage(event)
  }

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]) //状态
  const { mutate } = useUpdateItem('/order/orderupdate')

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys)
  }

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange
  }
  const [up, setup] = useState<number>(0)
  const handleChange = (eve: number) => {
    setup(eve)
  }
  const update = () => {
    mutate({
      id: JSON.stringify(selectedRowKeys),
      data: up
    })
  }

  const [orderlist, setorderlist] = useState<Orderlist[]>([])
  useEffect(() => {
    if (data) {
      const dataSource = data.data?.map((item: Orderlist) => ({
        ...item,
        key: item._id
      }))
      setorderlist(dataSource)
    }
  }, [data])

  const columns: TableColumnsType<Orderlist> = [
    {
      title: '编号',
      dataIndex: 'number'
    },
    {
      title: '订单编号',
      dataIndex: 'orderNumber'
    },
    {
      title: '提交时间',
      dataIndex: 'SubmitTime'
    },
    {
      title: '用户账号',
      dataIndex: 'UserAccount'
    },
    {
      title: '支付方式',
      dataIndex: 'payType',
      render: (payType: number) => {
        return payType == 1 ? '支付宝' : payType == 2 ? '微信' : '未支付'
      }
    },
    {
      title: '订单来源',
      dataIndex: 'sourceType',
      render: (sourceType: number) => {
        return sourceType == 1 ? 'PC订单' : 'APP订单'
      }
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      render: (status: number) => {
        return status == 1
          ? '待付款'
          : status == 2
            ? '待发货'
            : status == 3
              ? '已发货'
              : status == 4
                ? '已完成'
                : '已关闭'
      }
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 150,
      render: (_, record) => {
        return (
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Button onClick={() => gethistory(record._id)}>详情</Button>
            <Remove id={record._id} path={'order/orderdelete'} />
          </div>
        )
      }
    }
  ]
  const navigate = useNavigate()
  const gethistory = (id: string) => {
    navigate('/orderDetails', { state: id })
  }
  if (isLoading) {
    return <div>Loding...</div>
  }
  if (isError) {
    return <div>Error...</div>
  }
  return (
    <>
      <div className="con">
        <div className="seach">
          <div>
            <Button shape="circle" icon={<SearchOutlined />} />{' '}
            <span>筛选搜索</span>
          </div>
          <div>
            <Button type="text" onClick={() => Reset()}>
              重置
            </Button>
            <Button type="primary" onClick={() => Seach()}>
              查询搜索
            </Button>
          </div>
        </div>
        <div className="seach1">
          <div>
            <div className="input">
              <span style={{ width: '80px' }}>输入搜索：</span>
              <Input
                placeholder="订单编号"
                className="input-search"
                onChange={(event) => setnumbers(event.target.value)}
                value={numbers}
              />
            </div>
            <div className="input"></div>
            <div className="input">
              <span style={{ width: '80px' }}>提交时间：</span>
              <DatePicker
                onChange={dateonChange}
                placeholder="请选择日期"
                className="input-search"
                defaultValue={SubmitTimes}
              />
            </div>
            <div className="input">
              <span style={{ width: '80px' }}>订单分类：</span>
              <Select
                className="input-search"
                style={{ width: 200 }}
                options={[
                  { value: 1, label: '正常订单' },
                  { value: 2, label: '秒杀订单' }
                ]}
                value={orderTypes}
                placeholder="全部"
                onSelect={(event) => setorderTypes(event)}
              />
            </div>
          </div>

          <div>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                margin: '10px',
                flexWrap: 'wrap'
              }}
            >
              <span style={{ width: '80px' }}>收货人：</span>
              <Input
                placeholder="收货人姓名/手机号"
                className="input-search"
                value={receiverNames}
                onChange={(event) => setreceiverNames(event.target.value)}
              />
            </div>
            <div className="input">
              <span style={{ width: '80px' }}>订单状态：</span>
              <Select
                className="input-search"
                style={{ width: 200 }}
                options={[
                  { value: 1, label: '待付款' },
                  { value: 2, label: '待发货' },
                  { value: 3, label: '已发货' },
                  { value: 4, label: '已完成' },
                  { value: 5, label: '已关闭' }
                ]}
                placeholder="全部"
                onSelect={(event) => setstatuss(event)}
                value={statuss}
              />
            </div>
            <div className="input">
              <span style={{ width: '80px' }}>订单来源：</span>
              <Select
                className="input-search"
                style={{ width: 200 }}
                options={[
                  { value: 1, label: 'PC订单' },
                  { value: 2, label: 'app订单' }
                ]}
                onSelect={(event) => setsourceTypes(event)}
                placeholder="全部"
                value={sourceTypes}
              />
            </div>
          </div>
        </div>
      </div>
      <div
        style={{
          width: '100%',
          border: '1px solid black',
          padding: '10px',
          borderRadius: '5px'
        }}
      >
        <DatabaseOutlined />
        <span>数据列表</span>
      </div>

      <div
        style={{
          width: '100%',
          border: '1px solid black',
          padding: '10px',
          borderRadius: '5px',
          marginTop: '10px',
          marginBottom: '10px'
        }}
      >
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={orderlist}
          pagination={false}
          style={{ height: '380px' }}
        />
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            marginTop: '10px'
          }}
        >
          <div
            style={{
              width: '250px',
              marginLeft: '10px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}
          >
            <Select
              style={{ width: 200 }}
              onChange={(eve: number) => handleChange(eve)}
              options={[
                { value: 6, label: '删除订单' },
                { value: 3, label: '批量发货' },
                { value: 5, label: '关闭订单' }
              ]}
            />
            <Button type="primary" size="small" onClick={() => update()}>
              确定
            </Button>
          </div>
          <div>
            <Pagination
              current={page}
              pageSize={5}
              onChange={(e) => orderget(e)}
              total={data.count}
            />
          </div>
        </div>
      </div>
    </>
  )
}

export default App
